<template>
	<view class="contract-box">
		<!-- 	<view class="top-nav">
        <view class="nav-item " @click="hanleTab(1)" :class="{active:tabIndex==1}">发起合同</view>
        <view class="nav-item" @click="hanleTab(2)" :class="{active:tabIndex==2}">草稿合同</view>
      </view> -->
		<u-form labelPosition="left" :model="contractForm.data" ref="contractFormRef" :rules="contractForm.rule">
			<view class="main p-l-r-32 bg-color">
				<u-form-item label="主题" prop="title" borderBottom :required="true" labelWidth="50" class="">
					<u--input v-model="contractForm.data.title" border="none" placeholder="请输入主题"
						inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="分类" prop="category_id" borderBottom labelWidth="50" class=""
					@click="categoryPageObj.open()">
					<u--input v-model="contractForm.data.category.text" border="none" placeholder="请选择合同分类"
						readonly="true" inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="签署截止日期" prop="end_date" borderBottom :required="true" labelWidth="100" class="">
					<view @click="showDate.showDatetime = true" style="width: 100%; ">
						<u--input v-model="contractForm.data.end_date" border="none" placeholder="请选择签署截止日期"
							@focus="show = true" disabled disabledColor="#fff" suffixIcon="arrow-right"
							suffixIconStyle="color: rgba(0, 0, 0, 0.60)" inputAlign="right"></u--input>
					</view>
				</u-form-item>
				<u-form-item label="标签" prop="label" borderBottom labelWidth="100" class="">
					<view style="width: 100%; ">
						<u--input v-model="contractForm.data.label" border="none" placeholder="请输入标签"
							disabledColor="#fff" inputAlign="right"></u--input>
					</view>
				</u-form-item>
				<u-form-item label="证明" prop="label" borderBottom labelWidth="100" class="">
					<view style="width: 100%; ">
						<u-radio-group v-model="contractForm.data.is_annex" placement="column" iconPlacement="right">
							<view class="pay-stype-cell ">
								<view style="display: flex;align-items: center;">
									<view class="flex-1 flex item-center">
										<view>需要证明</view>
									</view>
									<u-radio shape="circle" size="20" :value="1" class="bottom-line" :name="1"
										:checked="contractForm.data.is_annex == 1"></u-radio>
								</view>
							</view>
							<view class="pay-stype-cell ">
								<view style="display: flex;align-items: center;">
									<view class="flex-1 flex item-center">
										<view>无需证明</view>
									</view>
									<u-radio shape="circle" size="20" :value="2" class="bottom-line" :name="2"
										:checked="contractForm.data.is_annex == 2"></u-radio>
								</view>
							</view>
						</u-radio-group>
					</view>
				</u-form-item>
				<u-form-item label="备注" prop="remark" borderBottom labelWidth="100" class="">
				</u-form-item>
				<u-form-item prop="name" labelWidth="100" class="">
					<u--textarea v-model="contractForm.data.remark" border='none' placeholder="请输入备注内容"
						:count="true"></u--textarea>
				</u-form-item>
			</view>
			<view class="main p-l-r-32 bg-color">
				<u-form-item label="发起人" prop="name" :required="true" labelWidth="100" class="">
				</u-form-item>
				<view class="">
					<view class="sign-border">
						<view class="flex sign" :class="[signerIndex == 1?'active':'']" @click="signerIndex = 1">
							<view class="list">
								<view>
									<image src="../../../static/images/preson-icon.png"></image>
								</view>
								<view>
									<view class="flex">
										<view v-if="contractForm.data.member.key_word" class="key_word">
											({{ contractForm.data.member.key_word }}) </view>
										{{ contractForm.data.member.user_name }}
									</view>
									<text>{{ contractForm.data.member.cellphone_secret }}</text>
								</view>
							</view>
							<view class="tag">发起人</view>
						</view>
					</view>
					<view class="flex" style="padding-bottom: 16rpx;margin-left: 30rpx;" @click="addKeyWord(1)">
						<u-icon name="plus-circle" color="#4787F0" size="18"></u-icon>
						<text class="font-color font-size-28" style="padding-left: 10rpx;font-weight: 500;">签署位置(关键字)
						</text>
					</view>
					<u-form-item prop="member" class="formitem" labelWidth="50" style="height: 0;padding: 0;">
					</u-form-item>
				</view>
			</view>
			<view class="main p-l-r-32 bg-color">
				<u-form-item label="签署方" prop="name" :required="true" labelWidth="100" class="">
				</u-form-item>
				<view class="sign-border" v-if="contractForm.data.signer.user.length > 0">
					<view class="flex sign" :class="[signerIndex == 2?'active':'']"
						v-for="(item,index) in contractForm.data.signer.user" :key="index" @click="signerIndex = 2">
						<view class="list">
							<view>
								<image src="../../../static/images/preson-icon.png"></image>
							</view>
							<view>
								<view class="flex">
									<view v-if="contractForm.data.signer.key_word" class="key_word">
										({{ contractForm.data.signer.key_word }}) </view>
									{{ item.user_name }}
								</view>
								<text>{{ item.cellphone_secret }}</text>
							</view>
						</view>
						<view class="small-edit">
							<u-icon name="edit-pen" color="#fff" size="16" @click="singer.edit(index)"></u-icon>
						</view>
						<view class="small-close">
							<u-icon name="close" color="#fff" size="16" @click="singer.delete(index)"></u-icon>
						</view>
						<view class="tag">{{ item.signer_user_type == 'member' ? '个人签署方' : '企业签署方' }}</view>
					</view>
				</view>
				<u-form-item prop="signer" labelWidth="50" class=""></u-form-item>
				<view class="flex">
					<view class="flex" style="padding-bottom: 16rpx;" @click="singer.open('member')"
						v-if="!contractForm.data.signer.user.length ||(singer.type == 'member'&& contractForm.data.signer.user.length>0) ">
						<u-icon name="plus-circle" color="#4787F0" size="18"></u-icon>
						<text class="font-color font-size-28" style="padding-left: 10rpx;font-weight: 500;">个人</text>
					</view>
					<view class="flex" style="padding-bottom: 16rpx;margin-left: 30rpx;" @click="singer.open('user')"
						v-if="!contractForm.data.signer.user.length ||(singer.type == 'user'&&contractForm.data.signer.user.length >0)">
						<u-icon name="plus-circle" color="#4787F0" size="18"></u-icon>
						<text class="font-color font-size-28" style="padding-left: 10rpx;font-weight: 500;">企业</text>
					</view>
					<view class="flex" style="padding-bottom: 16rpx;margin-left: 30rpx;" @click="addKeyWord(2)">
						<u-icon name="plus-circle" color="#4787F0" size="18"></u-icon>
						<text class="font-color font-size-28" style="padding-left: 10rpx;font-weight: 500;">签署位置(关键字)
						</text>
					</view>
				</view>
			</view>
			<view class="main p-l-r-32 bg-color">
				<u-form-item label="抄送人" prop="name" labelWidth="100" class="">
				</u-form-item>
				<view class="sign-border" v-if="contractForm.data.recipient_members.length > 0">
					<view class="flex sign" :class="'active'"
						v-for="(item,index) in contractForm.data.recipient_members" :key="index">
						<view class="list">
							<view>
								<image src="../../../static/images/preson-icon.png"></image>
							</view>
							<view>
								<view class="flex">
								</view>
								<text>{{ item.label }}</text>
							</view>
						</view>
						<view class="small-close">
							<u-icon name="close" color="#fff" size="16" @click="memberPageObj.delete(index)"></u-icon>
						</view>
						<view class="tag">抄送人</view>
					</view>
				</view>
				<view class="flex">
					<view class="flex" style="padding-bottom: 16rpx;" @click="memberPageObj.open()">
						<u-icon name="plus-circle" color="#4787F0" size="18"></u-icon>
						<text class="font-color font-size-28" style="padding-left: 10rpx;font-weight: 500;">添加抄送人</text>
					</view>
				</view>
			</view>
			<view class="main p-l-r-32 bg-color ">
				<u-form-item label="合同文件(需双方签署)" prop="contract_file" :required="true" labelWidth="200" class="">
					<view style="width: 100%;justify-content: flex-end;display: flex;align-items: center;" class="flex"
						@click="filePage.open(1,1)">
						<text>上传记录</text>
						<u-icon name="arrow-right" color="rgba(0, 0, 0, 0.60)" size="18"></u-icon>
					</view>
				</u-form-item>
				<view class="">
					<view class="flex" style="margin-bottom: 24rpx;"
						v-for="(item,index) in contractForm.data.contract_file" :key="index">
						<view class="flex-1 flex">
							<u-icon name="file-text" color="rgba(0, 0, 0, 0.60)" size="16"
								style="margin-top: 6rpx;"></u-icon>
							<view class="flex line-clamp-1" style="margin-left: 2rpx;">
								<text class="font-size-28 font-color-1" @click="policyPreview(item)">{{ item.org_name }}
								</text>
							</view>
						</view>
						<u-icon name="close" color="rgba(0, 0, 0, 0.60)" size="14" style="margin-top: 6rpx;"
							@click="filePage.fileClose(index,1)"></u-icon>
					</view>
				</view>
				<u-form-item label="协议文件(仅签署人签署)" labelWidth="200" class="">
					<view style="width: 100%;justify-content: flex-end;display: flex;align-items: center;" class="flex"
						@click="filePage.open(1,2)">
						<text>上传记录</text>
						<u-icon name="arrow-right" color="rgba(0, 0, 0, 0.60)" size="18"></u-icon>
					</view>
				</u-form-item>
				<view class="">
					<view class="flex" style="margin-bottom: 24rpx;"
						v-for="(item,index) in contractForm.data.contract_signer_file" :key="index">
						<view class="flex-1 flex">
							<u-icon name="file-text" color="rgba(0, 0, 0, 0.60)" size="16"
								style="margin-top: 6rpx;"></u-icon>
							<view class="flex line-clamp-1" style="margin-left: 2rpx;">
								<text class="font-size-28 font-color-1" @click="policyPreview(item)">{{ item.org_name }}
								</text>
							</view>
						</view>
						<u-icon name="close" color="rgba(0, 0, 0, 0.60)" size="14" style="margin-top: 6rpx;"
							@click="filePage.fileClose(index,2)"></u-icon>
					</view>
				</view>
				<u-form-item label="附件(无需签署)" labelWidth="200" class="">
					<view style="width: 100%;justify-content: flex-end;display: flex;align-items: center;" class="flex"
						@click="filePage.open(1,3)">
						<text>上传记录</text>
						<u-icon name="arrow-right" color="rgba(0, 0, 0, 0.60)" size="18"></u-icon>
					</view>
				</u-form-item>
				<view class="">
					<view class="flex" style="margin-bottom: 24rpx;"
						v-for="(item,index) in contractForm.data.contract_other_file" :key="index">
						<view class="flex-1 flex">
							<u-icon name="file-text" color="rgba(0, 0, 0, 0.60)" size="16"
								style="margin-top: 6rpx;"></u-icon>
							<view class="flex line-clamp-1" style="margin-left: 2rpx;">
								<text class="font-size-28 font-color-1" @click="policyPreview(item)">{{ item.org_name }}
								</text>
							</view>
						</view>
						<u-icon name="close" color="rgba(0, 0, 0, 0.60)" size="14" style="margin-top: 6rpx;"
							@click="filePage.fileClose(index,3)"></u-icon>
					</view>
				</view>
				<u-line></u-line>
			</view>
		</u-form>
		<!-- 底部按钮 -->
		<view class="flex bottom-button">
			<!-- 	<u-button type="info" text="制定签署位置" class="custom-style" @click="hanleBtn"
          :customStyle="{borderRadius:'0rpx',border:'none',padding:'0',height:'auto'}"></u-button> -->
			<u-button v-if="contract_id" type="primary" text="保存编辑" class="custom-style" @click="contractForm.edit(1)"
				iconColor="" :customStyle="{borderRadius:'0rpx',border:'none',padding:'0',height:'auto'}"></u-button>
			<u-button v-else type="primary" :text="'发起（剩余：'+contractForm.data.member.remaining_quantity+'次)'"
				class="custom-style" @click="contractForm.sumbit(1)" iconColor=""
				:customStyle="{borderRadius:'0rpx',border:'none',padding:'0',height:'auto'}"></u-button>
			<u-button v-if="contract_id < 1" :plain="true" type="error" text="保存" class="custom-style"
				@click="contractForm.tpl()" iconColor=""
				:customStyle="{borderRadius:'0rpx',border:'none',borderTop:'1rpx solid #f56c6c',padding:'0',height:'auto'}"></u-button>
		</view>
		<!-- 弹出框 -->
		<u-datetime-picker :show="showDate.showDatetime" mode="date" @cancel="showDate.cancel" :formatter="formatter"
			@confirm="showDate.confirm" v-model="showDate.defaultVal"></u-datetime-picker>
		<!-- <view @click="hanleAdd" class="save">保存<br />草稿</view> -->
		<signer-page ref="signerPageRef" @return-signer="singer.returnSigner"></signer-page>
		<signer-edit ref="signerEditRef" @return-signer="singer.returnSignerEdit"></signer-edit>
		<keyword-page ref="keywordPageRef" @return-keyword="keyword.returnKeyword"></keyword-page>
		<file-page ref="filePageRef" @return-file="filePage.returnFile"></file-page>
		<member-page ref="memberPageRef" @return-member="memberPageObj.returnMember"></member-page>
		<contract-category ref="categoryPageRef" @return-category="categoryPageObj.returnCategory"></contract-category>
	</view>
</template>
<script setup>
	import SignerPage from "../../../components/signer-page.vue";
	import MemberPage from "../../../components/member-page.vue";
	import SignerEdit from "../../../components/signer-edit.vue";
	import KeywordPage from "../../../components/keyword-page.vue";
	import FilePage from "../../../components/file-page.vue";
	import {
		onLoad,
		onShow,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		reactive,
		ref
	} from 'vue'
	import {
		memberTemplateList,
		membercontractDetail
	} from "../../../api/module/contract.js"
	import {
		formatter,
		inObject,
		nowDate,
		arrayFilter,
		msg,
		arrayPush,
		arrayGet
	} from "../../../utils/common.js"
	import {
		showDate
	} from "../../../utils/contract/initiate";
	import {
		memberInfo
	} from "../../../api/module/mine";
	import {
		contractCommonRef,
		contractCommon
	} from "../../../utils/contract/form";
	import UFormItem from "../../../uni_modules/uview-plus/components/u-form-item/u-form-item.vue";
	import {
		policyPreview
	} from "../../../utils/article/fileRead";
	import ContractCategory from "../../../components/contract-category.vue";
	const contract_id = ref('');
	const contractForm = contractCommon;
	const contractFormRef = contractCommonRef;
	// const tabIndex = ref(1)
	const data = reactive({})
	const signerIndex = ref(0)
	// 选择时间
	showDate.init.callback = function(value) {
		console.log('状态', contractForm.data.is_annex);
		contractForm.data.end_date = value;
	};
	const addKeyWord = (value) => {
		// if (!signerIndex.value) {
		//   uni.$u.toast('请选择签署方');
		//   return
		// }
		signerIndex.value = value
		keyword.open()
	}
	// 签署文件
	const filePageRef = ref(null);
	const filePage = reactive({
		returnFile: (files) => {
			if (files.type == 1) {
				contractForm.data.contract_file = arrayPush(contractForm.data.contract_file, files.file);
			}
			if (files.type == 2) {
				contractForm.data.contract_signer_file = arrayPush(contractForm.data.contract_signer_file,
					files.file);
			}
			if (files.type == 3) {
				contractForm.data.contract_other_file = arrayPush(contractForm.data.contract_other_file, files
					.file);
			}
		},
		open: (userType, type) => {
			filePageRef.value.open(userType, type);
		},
		fileClose: (index, type) => {
			if (type == 1) {
				contractForm.data.contract_file = arrayFilter(contractForm.data.contract_file, index);
			}
			if (type == 2) {
				contractForm.data.contract_signer_file = arrayFilter(contractForm.data.contract_signer_file,
					index);
			}
			if (type == 3) {
				contractForm.data.contract_other_file = arrayFilter(contractForm.data.contract_other_file,
					index);
			}
		}
	});
	// 合同分类
	const categoryPageRef = ref(null);
	const categoryPageObj = reactive({
		open: () => {
			console.log('show-category');
			categoryPageRef.value.open();
		},
		returnCategory: (changeData) => {
			contractForm.data.category = changeData;
			contractForm.data.category_id = arrayGet(changeData, 'id');
		},
	});
	// 抄送人选择
	const memberPageRef = ref(null);
	const memberPageObj = reactive({
		open: () => {
			console.log(memberPageRef);
			memberPageRef.value.open();
		},
		delete: (index) => {
			contractForm.data.recipient_members = arrayFilter(contractForm.data.recipient_members, index);
		},
		returnMember: (memberData) => {
			if (inObject(contractForm.data.recipient_members, 'id', memberData.id)) {
				return msg('抄送人已添加');
			}
			contractForm.data.recipient_members.push(memberData);
		},
	});
	// 签署人选择
	const signerPageRef = ref(null);
	const signerEditRef = ref(null);
	const singer = reactive({
		type: 'member',
		open: (type) => {
			singer.type = type;
			signerPageRef.value.open(type, 1);
		},
		delete: (index) => {
			contractForm.data.signer.user = arrayFilter(contractForm.data.signer.user, index);
		},
		edit: (index) => {
			signerEditRef.value.edit(contractForm.data.signer.user[index], index)
		},
		returnSigner: (signerData) => {
			if (inObject(contractForm.data.signer.user, 'cellphone', signerData.cellphone)) {
				return msg('签署人已添加');
			}
			contractForm.data.signer.user.push(signerData);
		},
		returnSignerEdit: (signerData) => {}
	});
	// 关键字选择
	const keywordPageRef = ref(null);
	const keyword = reactive({
		open: () => {
			keywordPageRef.value.open(1);
		},
		returnKeyword: (keywordVal) => {
			if (keywordVal.length < 1) {
				return msg('签署关键字获取失败');
			}
			console.log('签署信息', contractForm.data);
			switch (signerIndex.value) {
				case 1:
					contractForm.data.member.key_word = keywordVal
					if (keywordVal == contractForm.data.signer.key_word) {
						return msg('两方关键字不能相同');
					}
					break;
				case 2:
					contractForm.data.signer.key_word = keywordVal;
					if (keywordVal == contractForm.data.member.key_word) {
						return msg('两方关键字不能相同');
					}
					break;
			}
			keywordPageRef.value.close();
		},
	});
	onShow(() => {
		console.log('状态', contractForm.data.is_annex);
	})
	onUnload(() => {
		contractForm.reset()
	})
	onLoad((options) => {
		console.log(contractForm.data, 999)
		memberInfo().then(res => {
			const certification = arrayGet(res, 'member.member_certification');
			contractForm.data.member = {
				key_word: "",
				cellphone: arrayGet(certification, 'mobile_no'),
				cellphone_secret: arrayGet(certification, 'mobile_no_secret'),
				user_name: arrayGet(certification, 'name'),
				signer_user_type: 'member',
				remaining_quantity: arrayGet(res, 'count') - arrayGet(res, 'use_count'),
			}
		}).catch(err => {});
		contractForm.data.end_date = nowDate();
		if (options.id > 0) {
			memberTemplateList({
				contract_tpl_id: options.id
			}).then(res => {
				contractForm.tplAppend(options.id, res);
			})
		}
		if (options.contract_id > 0) {
			contract_id.value = options.contract_id;
			membercontractDetail({
				member_contract_id: options.contract_id
			}).then(res => {
				var member = '',
					signer = '',
					user = res.edit_signer.signer.user;
				res.signers.forEach((v, i) => {
					if (v.signer_type == 'self') {
						member = v;
					} else {
						signer = v;
					}
				})
				user.forEach((v, i) => {
					v.user_name = v.name
				})
				contractForm.data = {
					id: contract_id.value,
					title: res.title,
					end_date: res.end_date,
					remark: res.remark,
					label: res.label,
					contract_file: res.file,
					contract_other_file: res.other_file,
					contract_signer_file: res.signer_file,
					member: {
						cellphone_secret: member.cellphone_secret,
						cellphone: member.cellphone,
						key_word: member.key_word,
						remaining_quantity: 0,
						signer_user_type: member.signer_user_type,
						user_name: member.name,
					},
					signer: {
						key_word: res.edit_signer.signer.key_word,
						user: user
					},
					is_annex: res.is_annex,
				}
			})
		}
	})
</script>
<style scoped lang="scss" src="/static/css/contract/initiate.scss"></style>